<!DOCTYPE html>
<html>
    <head>
        <link type="text/css" rel="stylesheet" href="../recursos/css/jquery.stepy.css" />
        <script type="text/javascript" src="../recursos/js/jquery.validate.min.js"></script>
        <script type="text/javascript" src="../recursos/js/OrdTrabajo_Detalle.js"></script>
    </head>
    <body>

        <div id='main'>
            <input type="hidden" id="idOrdTrabajoServicio" name="idOrdTrabajoServicio"/>
            <header>Orden De Trabajo</header>
            <br/>        
            <div  id="divInformacionGeneral">
                <form id='frmInformacionGeneral'>   
                    <table  style="width: 100%;">
                        <tr>
                            <td colspan="4">
                                <div id="agregar" class='derecha'>
                                    <a id="link_guardar_OrdTrabajo" href="#">Guardar</a>
                                </div>                
                            </td>
                        </tr>
                        <tr>
                            <td style="width: 15%;">OT N.:</td>
                            <td style="width: 35%;"><input readonly type="text" id="codOrdTrabajo" name="codOrdTrabajo" /></td>
                            <td style="width: 15%;">DO.:</td>
                            <td style="width: 35%;"><input type="text" id="codOperacionInterna" name="codOperacionInterna" /></td>                        
                        </tr>
                        <tr>                        
                            <td>Fecha OT.:</td>
                            <td><input readonly type="text" id="fechaRegistro" name="fechaRegistro" class="datepicker" /></td>                        
                            <td>Puerto de Operacion:</td>
                            <td>
                                <select id="codMaeOperacionPuerto" name="codMaeOperacionPuerto">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codMaeOperacionPuerto"), "MaeOperacionPuerto", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>                            
                        </tr>
                        <tr>
                            <td>Tipo Operacion:</td>
                            <td>
                                <select id="codMaeOperacionTipo" name="codMaeOperacionTipo">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codMaeOperacionTipo"), "MaeOperacionTipo", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>                            
                            <td>Supervisor:</td>
                            <td>
                                <select id="codResponsable" name="codResponsable">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codResponsable"), "SeguridadUsuario", "selectSupervisoresHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>                            
                        </tr>                         
                        <tr>
                            <td>Cliente:</td>
                            <td>
                                <select id="codMaeCliente1" name="codMaeCliente1">
                                    <script type="text/javascript">
                                        //---  este select se carga de manera especial, ya que son muchos clientes y por eso se generan inconsistencias (aveces)
                                        //  cargarOpcionesSelectDesdeControlador($("#codMaeCliente1"), "MaeCliente", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>
                            <td>Consignatario(O):</td>
                            <td>
                                <input type="text" id="consignatario" name="consignatario" maxlength="256">
                                <!--select disabled id="codMaeCliente2" name="codMaeCliente2">
                                    <script type="text/javascript"> 
                                        cargarOpcionesSelectDesdeControlador($("#codMaeCliente2"),"MaeCliente","selectAllHTMLSelectFormat");
                                    </script>
                                </select-->
                            </td>
                        </tr>             
                        <tr>
                            <td>Tipo de Carga:</td>
                            <td>
                                <select id="codMaeOperacionIdent" name="codMaeOperacionIdent">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codMaeOperacionIdent"), "MaeOperacionIdent", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>
                            <td></td>
                            <td></td>
                        </tr>                                    
                        <tr class="TR_TipoCarga_Contenedor">
                            <td>Tipo Contenedor:</td>
                            <td>
                                <select id="codMaeContenedorTipo" name="codMaeContenedorTipo">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codMaeContenedorTipo"), "MaeContenedorTipo", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>                            
                            <td>Tamano de Contenedor:</td>
                            <td>
                                <select id="codMaeContenedorTamano" name="codMaeContenedorTamano">
                                    <option value="">Seleccionar</option>
                                    <option value="20">20</option>
                                    <option value="40">40</option>
                                    <option value="45">45</option>
                                </select>
                            </td>
                        </tr>                                    
                        <tr  class="TR_TipoCarga_Contenedor">
                            <td>Numero:</td>
                            <td><input type="text" id="numero" name="numero" /></td>                                                    
                            <td></td>
                            <td></td>
                        </tr>                         
                        <tr  class="TR_TipoCarga_CargaSuelta">
                            <td>Tipo Mercancia:</td>
                            <td>
                                <select id="codMaeMercanciaTipo" name="codMaeMercanciaTipo">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codMaeMercanciaTipo"), "MaeMercanciaTipo", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>                            
                            <td></td>
                            <td></td>
                        </tr>                         
                    </table>
                </form>   
            </div>
            <div id="content">
                <form id="custom" >
                    <input type='hidden' id='id' name='id'/>
                    <input type='hidden' id='controlador' name='controlador' value='OrdTrabajo'/>
                    <input type='hidden' id='operacion' name='operacion' value='selectById'/>

                    <div id="tabs">
                        <ul>
                            <li><a href="#tabs-1">Servicios</a></li>
                            <li><a href="#tabs-2">Estibadores</a></li>
                        </ul>
                        <div id="tabs-1">
                                <table   style="width: 100%;">
                                    <tr>
                                        <td width='15%'>Servicio:</td>
                                        <td>
                                            <select id="codMaeServicio" name="codMaeServicio">
                                                <script type="text/javascript">
                                                    cargarOpcionesSelectDesdeControlador($("#codMaeServicio"), "MaeServicio", "selectAllHTMLSelectFormat");
                                                </script>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>Cantidad:</td>
                                        <td><input type="number" id="cantidad_servicio" name="cantidad_servicio" /></td>                            
                                    </tr>
                                    <tr>
                                        <td>Descripci&oacute;n:</td>
                                        <td><textarea maxlength="256" id="observaciones_servicio" name="observaciones_servicio" type="text"   style="width: 100%"></textarea></td>                            
                                    </tr>                        
                                    <tr>
                                        <td colspan="2">
                                            <div id="agregar" class='derecha'>
                                                <a id="add_servicio" href="#">Agregar <img src="../recursos/imagenes/agregar.png" title="Agregar"/> </a>
                                            </div>                
                                        </td>
                                    </tr>
                                </table>
                                <br/>
                                <table  id="Tabla_OrdTrabajoServicio" class="grilla">
                                    <tr>
                                        <td>Servicio</td>
                                        <td>Cantidad</td>
                                        <td>Descripcion</td>
                                        <td>Acciones</td>
                                    </tr>
                                    <script type="text/javascript">
                                        cargarDatosGrillaDesdeControlador("Tabla_OrdTrabajoServicio", "OrdTrabajoServicio", "selectByIdOrdTrabajoHTMLTableFormat", "idOrdTrabajo=" + getUrlValues("id"));
                                    </script>
                                </table>                    
                        </div>
                        <div id="tabs-2">
                                <table   style="width: 100%;">
                                    <tr>
                                        <td width='15%'>Estibador:</td>
                                        <td>
                                            <select id="codEstibador" name="codEstibador">
                                                <script type="text/javascript">
                                                    cargarOpcionesSelectDesdeControlador($("#codEstibador"), "SeguridadUsuario", "selectEstibadoresHTMLSelectFormat");
                                                </script>
                                            </select>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td colspan="2">
                                            <div id="agregar" class='derecha'>
                                                <a id="add_estibador" href="#">Agregar <img src="../recursos/imagenes/agregar.png" title="Agregar"/> </a>
                                            </div>                
                                        </td>
                                    </tr>
                                </table>
                                <br/>
                                <table  id="tabla_OrdTrabajoEstibador" class="grilla">
                                    <tr>
                                        <td>Estibador</td>
                                        <td> Acciones</td>
                                    </tr>
                                    <script type="text/javascript">
                                        cargarDatosGrillaDesdeControlador("tabla_OrdTrabajoEstibador", "OrdTrabajoEstibador", "selectByIdOrdTrabajoHTMLTableFormat", "idOrdTrabajo=" + getUrlValues("id"));
                                    </script>
                                </table>                        
                        </div>
                    </div>
                </form>
            </div>  

            <!--Feedbacks-->
            <div id="divFeedback" class="popout" title="Feedback">
                <div>

                    <input type="hidden" id="controlador" name="controlador"/>
                    <input type="hidden" id="operacion" name="operacion"/>
                    <table>
                        <tr>
                            <td>Observaciones</td>
                        </tr>
                        <tr>
                            <td>
                                <textarea class="large_text" id="observaciones" name="observaciones"></textarea>
                            </td>
                        </tr>                        
                        <tr>
                            <td>
                                <div id="agregar" class='derecha'>
                                    <a id="lnk_agregar_feedback" href="#">Agregar <img src="../recursos/imagenes/agregar.png" title="Agregar"/> </a>
                                </div>                
                            </td>
                        </tr>                        
                    </table>
                </div>
                <br>
                <table id="OrdTrabajoServicioFeedBack" class="grilla">
                    <tr>
                        <td>Observaciones</td>
                        <td>Acciones</td>
                    </tr>             
                </table>
            </div>        

            <!--Eventos -->
            <div id="divEvento" class="popout" title="Eventos">
                <div>
                    <table>
                        <tr>
                            <td>Tipo</td>
                            <td>
                                <select id="codMaeEventoTipo" name="codMaeEventoTipo">
                                    <script type="text/javascript">
                                        cargarOpcionesSelectDesdeControlador($("#codMaeEventoTipo"), "MaeEventoTipo", "selectAllHTMLSelectFormat");
                                    </script>
                                </select>
                            </td>
                        </tr>
                        <tr>
                            <td colspan="2">Observaciones</td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <textarea class="large_text" id="observaciones" name="observaciones"></textarea>
                            </td>
                        </tr>                        
                        <tr>
                            <td colspan="2">
                                <div id="agregar" class='derecha'>
                                    <a id="lnk_agregar_evento" href="#">Agregar <img src="../recursos/imagenes/agregar.png" title="Agregar"/> </a>
                                </div>                
                            </td>
                        </tr>                        
                    </table>
                </div>
                <hr>
                <table id="OrdTrabajoServicioEvento" class="grilla">
                    <tr>
                        <td>Tipo</td>
                        <td>Observaciones</td>
                        <td>Acciones</td>
                    </tr>          
                </table>
            </div>           
        </div>		
    </body>	
</html>


